<template>
  <div class="chat-user">
    <div class="userList-left">

      <div class="left-list" v-for="(item,index) in friendList" :key="index"
           @click="sendChat(item.userId)">
        <img :src="item.avatar" class="left-list-img">
        <span class="left-list-title">
            {{ item.username }}
          </span>
      </div>


    </div>
    <div class="userList-right">
      <CHATMSG :obj="showChild"></CHATMSG>
    </div>
  </div>
</template>

<script>
import CHATMSG from '@/views/chat/chatMsg/index'
import {friendList} from '@/api/chat/index'

export default {
  components: {CHATMSG},
  name: "index",
  data() {
    return {
      count: 0,
      friendList: [],
      showChild: {
        receiverPerson: '',
        show: false
      },
      active: ''
    }
  },
  methods: {
    //给好友发送消息
    sendChat(userId) {
      this.showChild = {
        receiverPerson: userId,
        show: true
      }
    },
    //获取好友列表
    queryFriendList() {
      friendList().then(res => {
        if (res.code === 200) {
          this.friendList = res.data
        }
      }).catch(error => {

      })
    }
  },
  created() {
    this.queryFriendList()
  }
}
</script>

<style scoped lang="scss">
.chat-user {
  display: flex;
  height: 100%;
  width: 100%;
}

.userList-left {
  overflow-y: auto;
  padding-top: 5px;
  padding-left: 10px;
  flex: 1;
  border: 3px solid #eae6e6;
  border-radius: 5px;
}

.userList-right {
  flex: 4;
  border: 3px solid #eae6e6;
  border-radius: 5px;
  border-left: none;
}

.left-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-rows: repeat(1, 1fr);
  grid-template-areas: 'a b'
                       'a b';
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.left-list-img {
  grid-area: a;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-bottom: 10px;

}

.left-list-title {
  grid-area: b;
  margin-bottom: 10px;
  font-size: 14px;
}

.left-list:hover {
  background-color: #d7eee6;
}

::v-deep .el-badge__content.is-fixed {
  transform: translateY(110%) translateX(130%);
}
</style>